<template>
	<div class="contents" ref="body">
		<Title></Title>
		<div class="app-view-wrapper">
			<div class="container">
				<div class="list-navbar" v-if="list.length" ref="nav"><!--一级导航-->
					<ul>
						<li  v-for="(item,i) in list" :key="i" :class="item.activate?'activate':''" @click="_click(i)">
								<span v-text="item.name"></span>
						</li>
					</ul>
				</div>
				<div class="content" v-if="category.length" ref="content"><!--二级导航-->
					<div class="list-wrap" ref="wrap">
						<template v-for="(item,i) in category">
							<template v-if="item.length">
								<div :class="'category'+i" class="category_list" ref="category_list">
									<template v-for="(dom,idx) in item">
										<div v-if="dom.banner" class="banner">
											<img :src="dom.src" alt="">
										</div>
										<div v-else-if="dom.title" class="title">
											<p>
												<span v-text="dom.name"></span>
											</p>
										</div>
										<div v-else="dom.banner dom.title" class="list" @click="_routerLink(dom.route?dom.route:null)">
											<div>
												<img :src="dom.src" alt="">
												<span v-text="dom.name"></span>
											</div>
										</div>
									</template>
								</div>
							</template>
						</template>
					</div>
				</div>
			</div>
		</div>
		<!--页脚-->
		<menus></menus>
	</div>
</template>
<script type="text/ecmascript-6">
    import {createNamespacedHelpers} from "vuex";
    import menus from "../components/MenusSlot";
    import Title from "../components/Title";
    const {mapActions, mapState} = createNamespacedHelpers("category");//mapState放在计算属性
    export default {
        components: {//注册组件不然不能使用
            menus,
            Title
        },
	    data(){
			return {}
	    },
	    computed:{//计算
		    ...mapState(["list","lump"]),//展开category的state的list
            category(){//计算二级分类
		        let result =[];
		        for(let i=1;i<this.list.length;i++){
                    let newList = this.lump.filter((item)=> item.fid  === i);//根据fid进行分割数组
                    result.push(newList);
		        }
		        return result;
		    }
	    },
        methods:{//方法
			_click(i){//点击切换一级标题
				this.$store.commit("category/_click",i);
				let top = 0;
				for(let j = 0;j<i;j++){
                   top += this.$refs.category_list[j].clientHeight;
				}
				this.$refs.wrap.style.transform = "translateY(-"+ top +"px)";
			},
	        _routerLink(index){//点击商品跳转到商品详情把商品id通过路由传参传导详情页
		        index ? this.$router.push({path:"/detail",query:{index}}): null //跳转的路由 //传的参数
	        },
	        _contentScroll(){
                this.$ImgLoaded(this.$refs.body,()=>{//图片加载完成执行
            /*-------------------------需要更新一下betterScroll----------------------------*/
                    if(this.contentScroll) {//如果滚动已经存在直接返回
                        //console.log('更新');
                       // this.contentScroll.refresh();
                        return;
                    }
                    this.contentScroll = new this.$BScroll(this.$refs.content,{
                        scrollY: true,
                        scrollX: false, // 开启横向滚动
                        momentum: true, //better-scroll的惯性滑动
                        click:true,  //点击事件生效
                    });
                });
            },
	        _navScroll(){
			    if(this.navScroll){
                    this.navScroll.refresh();
                    return;
			    }
                this.navScroll = new this.$BScroll(this.$refs.nav,{
                    scrollY: true,
                    scrollX: false, // 开启横向滚动
                    momentum: true, //better-scroll的惯性滑动
                    click:true,
                })
	        }
        },
	    /*生命周期钩子函数*/
	    created(){//组件创建完毕
	        this.$store.dispatch("category/init");//创建完毕调用仓库里的init函数发送ajax请求数据
		    this.$store.dispatch("category/lump");//加载右侧数据
	    },
	    updated(){//组件更新完毕
			this._contentScroll();
            this._navScroll();
	    },
	    /*------------------------------------激活-----------------------------------*/
	    activated(){
            if(this.contentScroll) {//如果滚动已经存在直接返回
                this.contentScroll.refresh();
            }
	    },
	    /*----------------------------------离开-----------------------------------------*/
	    deactivated(){

	    },
        /*--------------------------需要卸载betterScroll---------------------------------*/
	    destroyed(){//组件卸载完毕

        },

    }
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
	$back = ""
	$zoom = ""
	.contents
		width 100%
		height: 100%
		overflow hidden
		.app-view-wrapper
			width 100%
			height:100%
			padding-top 0.9rem
			.container
				width 100%
				height:100%
				.list-navbar//一级
					position fixed
					top:0.9rem
					left 0
					width 1.5rem
					height 100%
					border-right 1px solid #ccc
					overflow hidden
					padding-top 0.2rem
					z-index 999
					ul
						padding-bottom 2rem
						li
							text-align center
							font-size .26rem
							color #3c3c3c
							height 1rem
							line-height 1rem
							transition all 0.4s
						.activate
							font-size .34rem
							color #ff6700
							transition all 0.4s
				.content
					width 100%
					height 100%
					overflow hidden
					margin-bottom 1.2rem
					.list-wrap
						width 100%
						padding-left 1.84rem
						padding-right .32rem
						padding-bottom 1.2rem
						transition  all .5s
						.category_list
							font-size 0
							.banner
								width 100%
								img
									width 100%
							.title
								margin-top .2rem
								font-size 0.36rem
								width 100%
								p
									font-size 0.28rem
									padding 0.4rem 0
									text-align center
									color black
									span
										text-align center
										position relative
										padding 0
									span::before,span::after
										content ""
										position absolute
										top 50%
										width .4rem
										border-top: 0.03rem solid #e0e0e0
									span::before
										left: calc(100% + 0.3rem)
									span::after
										right calc(100% + 0.3rem)
							.list
								width 33.333333%
								display inline-block
								padding-bottom 0.3rem
								div img
									width 50%
								div
									font-size 0.23rem
									display flex
									flex-direction column
									justify-content center
									align-items center
									span
										margin-top 0.2rem
										overflow hidden
										text-overflow ellipsis
										white-space nowrap
										color rgba(0,0,0,.54)

</style>